<template>
  <van-nav-bar
    title="好友"
    left-text="返回"
    left-arrow
    @click-left="handleToBack"
    fixed
    placeholder
    z-index="99"
  />
  <div class="u-font-14">
    <van-sticky :offset-top="46">
      <van-row class="u-p-t-10 u-p-b-10" style="background-color: #ffffff;">
        <van-col span="10">玩家</van-col>
        <van-col span="10">胜率</van-col>
        <van-col span="4">场次</van-col>
      </van-row>
    </van-sticky>
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-row
        class="u-m-t-6 u-p-b-6 u-border-bottom"
        v-for="item in peerList"
        :key="item.account_id"
        align="center"
        justify="space-between"
        @click="handleToAccount(item.account_id)"
      >
        <van-col span="10">
          <van-row class="u-line-1 u-p-l-4" align="center" gutter="10" justify="space-between">
            <van-col span="6">
              <van-image lazy-load width="32" height="32" round :src="item.avatarfull" />
            </van-col>
            <van-col span="18">
              <div class="u-line-1 u-text-left">{{ item.personaname }}</div>
            </van-col>
          </van-row>
        </van-col>
        <van-col span="10">
          <div class="u-p-r-20 u-p-l-20">
            <div
              class="u-m-b-4"
            >{{ item.with_games ? (item.with_win / item.with_games * 100).toFixed(1) : 0 }}%</div>
            <van-progress
              :percentage="item.with_games ? (item.with_win / item.with_games * 100) : 0"
              :show-pivot="false"
            />
          </div>
        </van-col>
        <van-col span="4">
          <div>{{ item.with_games }}</div>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getPlayerPeers } from '@/api/player'

const router = useRouter()
const route = useRoute()

const handleToBack = () => {
  router.back()
}
const peerList = ref([])

const loading = ref(false);
const finished = ref(false);

const onLoad = () => {

  getPlayerPeers(route.params.account_id).then(res => {
    peerList.value = res.filter(item => item.with_games > 0)
    // 加载状态结束
    loading.value = false;
    finished.value = true;
  })
};
const handleToAccount = (account_id) => {
  router.push({
    name: 'Account',
    params: {
      account_id
    }
  })
}
</script>